<template>
	<view class="page">

		<cu-custom bgColor="#ffffff" :isBack="true" textColor="#000000">
			<block slot="backText"> </block>
			<block slot="content">课程详情</block>
		</cu-custom>

		<template>
			<view class="video-wrap">
				<video id="myVideo" class="video-wrap" :src="videoUrl" :poster="thumb" controls="true"
					:danmu-list="danmuList" @timeupdate="videoTimeUpdateEvent" @ended="endedFun()">
					<!-- 倍速播放 h5支持较差 -->
					<cover-view class="video-control">
						<cover-view class="multi rate" @tap="showSwitchRate">x {{ currentRate }}</cover-view>
					</cover-view>
					<cover-view class="multi-list rate" :class="{ active: rateShow }">
						<cover-view v-for="(item, index) in ['0.5', '0.8', '1.0', '1.25', '1.5']" :key="index"
							class="multi-item rate" :data-rate="item" @tap="switchRate"
							:class="{ active: item == currentRate }">
							{{ item }}
						</cover-view>
					</cover-view>
				</video>
			</view>
		</template>
		<view class="course-bottom">
			<view class="flex align-center justify-center font-weight-bold course-info-tab"
				style="background-color: #ffffff;">
				<view class="mx-5 c-info-tabbar" @click="changeTab(index)" v-for="(item, index) in tabBars" :key="index"
					:class="tabIndex === index ? 'text-main font-md' : 'font-md text-light-muted'"
					style="color:#3694EF ;width: 50%;text-align: center">
					{{item.name}}
				</view>
			</view>
			<swiper :current="tabIndex" class="swiper-box" :style="{height:scrollH+'rpx'}" @change="onChangeTab"
				style="width: 100%;background-color:#ffffff ;padding: 15rpx 20rpx 15rpx 25rpx;">
				<swiper-item class="course-info-item">
					<scroll-view scroll-y :style="{height:scrollH+'rpx'}">
						<view class="row">
							<view class="page_title">{{kecheng.kechengName}}</view>
							<view>
								<view class="learn" style="    border: 1px solid #3694EF;
    color: #3694EF;
    border-radius: 4rpx;
    line-height: 32rpx;
    font-size: 18rpx;
    position: relative;
    left: 15rpx;
    top: 12rpx;
    padding-left: 9rpx;
        padding-right: 9rpx;">
									视频自学
								</view>
							</view>
						</view>
						<text class="page_des"
							v-if="kecheng.kechengFutitle == null || kecheng.kechengFutitle == '' || kecheng.kechengFutitle == undefined || kecheng.kechengFutitle == 'null'"></text>
						<text class="page_des" v-else>{{kecheng.kechengFutitle}}</text>
						<view class="price-time-stunum" style="display: flex;align-items: center;">
							<view class="">
								<image class="search_home" style="width: 29rpx;height: 29rpx;" src="../../../static/black/yuanxing-renmingbi@2x.png">
								</image>
							</view>
							<view class="free1" style="margin-top: -10rpx;margin-left: 4px;">
								<text class="free">免费</text>
							</view>
							<view class="time-wrap">
								<image class="search_home" style="width: 29rpx;height: 29rpx;" src="../../../static/black/shijian@2x.png">
								</image>
								<uni-dateformat :date="kecheng.kechengTime" format="yyyy-MM-dd"
									style="position: relative;bottom: 6rpx;left: 8rpx;"></uni-dateformat>
							</view>
							<view class="">
								<image class="search_home" style="width: 29rpx;height: 29rpx;" src="../../../static/black/gerenzhongxinwode@2x.png">
								</image>
								<text class="stunum-wrap"
									style="position: relative;top: -4rpx;">{{kecheng.kechengPersonnum}}人在学</text>
							</view>
						</view>
						<view class="new_line"></view>
						<view class="about-teacher-wrap">
							<text class="about-title ateacher-title" style="border-left: 5px solid #3694EF;
    padding-left: 9rpx;">讲师介绍</text>
							<view class="ateacher-list">
								<view class="ateacher-item">
									<image class="ateacher-img" :src="kecheng.teacherImg" mode=""></image>
									<view class="ateacher-info">
										<text class="at-info-item at-info-name"
											style="font-weight:700 ;">{{kecheng.kechengTeacher}}</text>
										<text class="at-info-item">主讲老师</text>
									</view>
									<!-- 								<text class="teacher-arow iconfont icon-jinrujiantou"></text> -->
								</view>
								<view class="ateacher-item ateacher-fudao-item">
									<image class="ateacher-img" :src="kecheng.teacher2Img" mode=""></image>
									<view class="ateacher-info">
										<text class="at-info-item at-info-name"
											style="font-weight:700 ;">{{kecheng.kechengTeacher2}}</text>
										<text class="at-info-item">实操老师</text>
									</view>
									<!-- 						<text class="teacher-arow iconfont icon-jinrujiantou"></text> -->
								</view>
							</view>
						</view>
						<view class="about-live-wrap">
							<text class="about-title alive-title" style="border-left: 5px solid #3694EF;
    padding-left: 9rpx;">内容介绍</text>
							<view class="alive-info">
								<rich-text style=" text-indent: 1em; "
									v-if="kecheng.kechengJianjie == null || kecheng.kechengJianjie == '' || kecheng.kechengJianjie == undefined || kecheng.kechengJianjie == 'null'">
								</rich-text>
								<rich-text style=" text-indent: 1em; " :nodes="kecheng.kechengJianjie" v-else>
								</rich-text>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="course-info-item">
					<scroll-view scroll-y :style="{height:scrollH+'rpx'}">
						<view>
							<uni-collapse accordion v-model="accordionVal">
								<uni-collapse-item :title="item.keshiName"
									v-for="(item, index) in kecheng.xsjyKeshiList" :key="index">
									<view class="content">
										<image v-if="tingkedataOpenkeshi >= index" @click="openKecheng(index)"
											style="position: absolute;width: 36rpx;height: 36rpx;left: 23rpx; top: 22rpx;"
											src="">
										</image>
										<image v-else
											src=""
											style="position: absolute;
    width: 36rpx;
    height: 36rpx;
    left: 23rpx;
    top: 22rpx;"></image>
										<view class="textcontent"
											style="float:left;width:75%;padding-left:10%; overflow: scroll;height: 78rpx;padding-top: 16rpx;">
											<text class="text">{{item.keshiFutitle}}</text>
										</view>
										<view style="float:right;width:13%;padding-right:2%;">

											<view v-if="tingkedataOpenkeshi >= index" @click="openKecheng(index)">
											</view>

											<image v-else
												style="    width: 30rpx;height: 30rpx;position: relative;top: 20rpx;right: 18rpx;"
												src="">
											</image>
										</view>
									</view>
								</uni-collapse-item>
								<template v-if="kongKeshi">
									<view class="xiangziwrap">
										<image class="xiangzi" src="../../../static/images/xiangzi.png"
											mode="aspectFill"></image>
										<text class="xiangzi_txt">没有课时...</text>
									</view>
								</template>
							</uni-collapse>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script>
	import uniCollapse from '@/components/uni-ui/uni-collapse/uni-collapse.vue';
	import uniCollapseItem from '@/components/uni-ui/uni-collapse-item/uni-collapse-item.vue';
	import uniIcons from '@/components/uni-ui/uni-icons/uni-icons.vue';
	import uniDateformat from '@/components/uni-ui/uni-dateformat/uni-dateformat.vue';

	const app = getApp();
	export default {
		components: {
			uniCollapse,
			uniCollapseItem,
			uniIcons,
			uniDateformat
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量

				kecheng: {}, //课程信息

				videoContext: '', //视频播放控件上下文 onLoad方法加载此方法
				videoUrl: '', //当前视频路径
				thumb: '', //当前封面
				danmuList: [{ //弹幕列表
						text: '讲的非常好',
						color: '#ffffff',
						time: 1
					},
					{
						text: '收货很大',
						color: '#ffffff',
						time: 3
					}
				],

				currentRate: 1.0, // 默认倍速
				rateShow: false, // 倍速浮层

				shitingTime: 10, // 试听时间 10秒
				tingkedataOpenkeshi: 0, //课程开放到课时章节
				videoIndex: 0, //当前播放的视频的下标
				kongKeshi: false,
				tabIndex: 0,
				kongkong: true, // 是否显示无课时

				tabBars: [{
					name: "课程介绍"
				}, {
					name: "课程目录"
				}],

				scrollH: 0,
				scrollallH: 0,
			}
		},
		onReady: function() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					that.scrollH = res.windowHeight * 750 / res.windowWidth - 600;
				}
			});
		},
		onShow: function() {
			this.addTingKeLog();
		},
		onLoad(option) {
			this.videoContext = uni.createVideoContext('myVideo'); // 播放器控件 上下文
			this.getKechengInfo(option.kechengId); // 加载课程信息	
		},
		methods: {
			//添加听课记录
			addTingKeLog() {

				if (
					(app.globalData.userinfo.studentId != null && app.globalData.userinfo.studentId != "" && app.globalData
						.userinfo.studentId != undefined) &&
					(this.kecheng.kechengId != null && this.kecheng.kechengId != "" && this.kecheng.kechengId != undefined)
				) {
					// 添加听课数据
					uni.request({
						url: app.globalData.serve_study_url + "addUpdateTingkeData",
						method: 'GET',
						data: {
							"tingkedataDataSfzId": app.globalData.userinfo.studentId,
							"tingkedataKechengId": this.kecheng.kechengId,
						},
						success: res => {
							this.tingkedataOpenkeshi = res.data.data.tingkedataOpenkeshi;
						},
					});
				} else if (
					(app.globalData.userinfo.userId != null && app.globalData.userinfo.userId != "" && app.globalData
						.userinfo.userId != undefined) &&
					(this.kecheng.kechengId != null && this.kecheng.kechengId != "" && this.kecheng.kechengId != undefined)
				) {
					// 添加听课数据
					uni.request({
						url: app.globalData.serve_study_url + "addUpdateTingkeData",
						method: 'GET',
						data: {
							"tingkedataBeiyong": app.globalData.userinfo.userId,
							"tingkedataKechengId": this.kecheng.kechengId,
						},
						success: res => {
							this.tingkedataOpenkeshi = res.data.data.tingkedataOpenkeshi;
						},
					});
				}

			},

			// 显示倍速浮层
			showSwitchRate(rate) {
				let that = this;
				that.rateShow = true;
			},
			// 切换倍速
			switchRate(e) {
				let that = this;
				let rate = Number(e.currentTarget.dataset.rate);
				that.currentRate = rate;
				that.rateShow = false;
				this.videoContext.playbackRate(rate);
			},

			//切换选项卡
			changeTab(index) {
				this.tabIndex = index
			},
			//滑动
			onChangeTab(e) {
				this.tabIndex = e.detail.current; //切换当前索引
			},

			// 获取内容详情
			getKechengInfo(kechengId) {
				// 获得课程详情
				uni.request({
					url: app.globalData.serve_study_url + kechengId,
					method: 'GET',
					data: {},
					success: res => {
						this.kecheng = res.data.data;
						let isKeshi = this.kecheng.xsjyKeshiList.length <= 0;
						if (isKeshi) {
							this.kongKeshi = isKeshi;
						} else {
							this.videoUrl = this.kecheng.xsjyKeshiList[0].keshiShipinpath;
							this.thumb = this.kecheng.xsjyKeshiList[0].keshiImg;
							if (app.globalData.userinfo.studentId != null && app.globalData.userinfo
								.studentId != "" && app.globalData.userinfo.studentId != undefined) {
								// 添加听课数据
								uni.request({
									url: app.globalData.serve_study_url + "addUpdateTingkeData",
									method: 'GET',
									data: {
										"tingkedataDataSfzId": app.globalData.userinfo.studentId,
										"tingkedataKechengId": this.kecheng.kechengId,
									},
									success: res => {
										this.tingkedataOpenkeshi = res.data.data
											.tingkedataOpenkeshi;
									},
								});
							} else if (app.globalData.userinfo.userId != null && app.globalData.userinfo
								.userId != "" && app.globalData.userinfo.userId != undefined) {
								// 添加听课数据
								uni.request({
									url: app.globalData.serve_study_url + "addUpdateTingkeData",
									method: 'GET',
									data: {
										"tingkedataBeiyong": app.globalData.userinfo.userId,
										"tingkedataKechengId": this.kecheng.kechengId,
									},
									success: res => {
										this.tingkedataOpenkeshi = res.data.data
											.tingkedataOpenkeshi;
									},
								});
							}
						}
					},
				});
			},

			// 监听播放进度改变
			videoTimeUpdateEvent(e) {

				let currentTime = Number(e.detail.currentTime); //为每次触发时,视频的当前播放时间
				if (currentTime >= this.shitingTime) {
					if (
						!(
							(app.globalData.userinfo.studentId != null && app.globalData.userinfo.studentId != "" && app
								.globalData.userinfo.studentId != undefined) ||
							(app.globalData.userinfo.userId != null && app.globalData.userinfo.userId != "" && app
								.globalData.userinfo.userId != undefined)
						)
					) {

						// 试看结束,在这做一些想做的操作,例如停止视频播放
						this.videoContext.exitFullScreen(); // 退出全屏
						this.videoContext.pause(); // 暂停播放
						this.videoContext.seek(0); // 禁止拖动
						uni.showModal({
							title: "登录提示1",
							content: "请登录后，继续观看课程",
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '../../../pages/login/login'
									});
								} else if (res.cancel) {}
							}
						});
					}
				}
			},

			// 视频播放完毕触发函数
			endedFun() {

				// 更改开放的课时 章节
				if (this.videoIndex >= this.tingkedataOpenkeshi) {
					var dataItem;

					if (app.globalData.userinfo.studentId != null && app.globalData.userinfo.studentId != "" && app
						.globalData.userinfo.studentId != undefined) {
						dataItem = {
							"tingkedataDataSfzId": app.globalData.userinfo.studentId,
							"tingkedataKechengId": this.kecheng.kechengId,
							"tingkedataOpenkeshi": (this.videoIndex + 1)
						}
					} else if (app.globalData.userinfo.userId != null && app.globalData.userinfo.userId != "" && app
						.globalData.userinfo.userId != undefined) {
						dataItem = {
							"tingkedataKechengId": this.kecheng.kechengId,
							"tingkedataBeiyong": app.globalData.userinfo.userId,
							"tingkedataOpenkeshi": (this.videoIndex + 1)
						}
					}

					uni.request({
						url: app.globalData.serve_study_url + "updateTingkeOpenstate",
						method: 'GET',
						data: dataItem,
						success: res => {
							this.tingkedataOpenkeshi = res.data.data.tingkedataOpenkeshi;
						},
					});
				}
				this.videoContext.exitFullScreen(); // 退出全屏
				this.videoIndex = this.videoIndex + 1; // 切换下一个当前课时
				if (this.videoIndex < this.kecheng.xsjyKeshiList.length) {
					this.videoUrl = this.kecheng.xsjyKeshiList[this.videoIndex].keshiShipinpath;
					this.thumb = this.kecheng.xsjyKeshiList[this.videoIndex].keshiImg;
				} else {
					this.videoUrl = this.kecheng.xsjyKeshiList[this.videoIndex - 1].keshiShipinpath;
					this.thumb = this.kecheng.xsjyKeshiList[this.videoIndex - 1].keshiImg;
				}
			},

			// 手动切换播放课程
			openKecheng(index) {
				this.videoContext.exitFullScreen(); // 退出全屏
				this.videoUrl = this.kecheng.xsjyKeshiList[index].keshiShipinpath;
				this.thumb = this.kecheng.xsjyKeshiList[index].keshiImg;
				this.videoIndex = index;
			},
		}
	}
</script>
<style>
	/* 课程详情页公共样式 */
	@import url("/static/css/course_info/course_info.css");
	@import url("../../../common/beisu.css");

	.active {
		color: #3694EF !important
	}

	.page {
		width: 100%;
	}

	.video-wrap {
		text-align: center;
		width: 100%;
		height: 400rpx;
		background-color: #000000;
		position: relative;
	}

	.at-info-name {
		font-size: 31rpx;
	}

	.at-info-item {
		font-size: 26rpx;
	}

	.xiangziwrap {
		margin-top: calc(30%);
		position: relative;
		left: calc(50% - 80px);
		/* top: calc(50%); */
		width: 300rpx;
		height: 100rpx;
	}

	.xiangzi {
		margin-left: 100rpx;
		width: 100rpx;
		height: 100rpx;
	}

	.time-wrap {
		margin-left: 0;
	}

	.xiangzi_txt {
		width: 100%;
		display: block;
		text-align: center;
		font-size: 18rpx;
		color: #C7C7C7;
	}

	.c-info-tabbar {
		margin: 0 auto;
		padding-top: 27rpx;
		padding-bottom: 16rpx;
	}

	.text-main::after {
		background-color: #3694EF !important;
		width: 50vw;
		left: -100rpx;
	}

	.uni-collapse-cell__title.data-v-13bcbdda {
		background-color: #f7fbff;
		border-radius: 17rpx;
		margin-top: 16rpx;
	}
</style>